<template>
<div class="commoditylists">
   <editordlg v-if="isShowAddDlgZipDlg"  v-on:on-close-handler="closeAddDlgZipDlg" 
            v-on:on-click-category="onClickCategory" 
            title="修改目录" oldtitle="旧目录" newtitle="新目录"
            :oldname="oldzipname" newplaceholder="请输入新目录"></editordlg>
   <el-row>
      <span>{{ msg }}</span>
    </el-row>
    <el-row class="buttonBar">
      <el-button type="success" @click="reflushHandler()">{{ reflus_btn }}</el-button>
      <el-button  @click="isShowAddDlg=!isShowAddDlg" type="primary">{{ add_btn }}</el-button>
    </el-row>
    <operateview v-if="isShowAddDlg"  v-on:closeHdl="closeHandler()" v-on:addZipHdl="addZipHandler()"></operateview>
    <el-row>
        <el-tree
            :data="options"
            show-checkbox
            node-key="id"
            default-expand-all
            :expand-on-click-node="false">
            <span class="custom-tree-node" slot-scope="{ node, data }">
                <span>{{ node.label }}</span>
                <span>
                <el-button v-if="showDeletButton(node)"
                    type="text"
                    size="mini"
                    @click="() => deleteCategory(node, data)">
                    删除目录
                </el-button>
                <el-button
                    type="text"
                    size="mini"
                    @click="() => updateCategory(node, data)">
                    修改目录
                </el-button>
                </span>
            </span>
        </el-tree>
    </el-row>

</div>
</template>
<script>
import operateview from "./operate";
import editordlg from "../common/editordlg";
export default {
    created() {
        let category = this.$persistence.get("category") ? this.$persistence.get("category") : null;
        if (category == null) {
            this.getCategoryList();
        } else {
            this.options = category;
            this.loading = false;
        }
    },
    name: "commoditylists",
    components: { operateview, editordlg },
    data() {
        return {
            isShowAddDlgZipDlg: false,
            isShowAddDlg: false,
            currentPage: 1,
            oldzipname: "",
            newzipname: "",
            msg: "商品目录",
            reflus_btn: "刷新数据",
            add_btn: "添加目录",
            loading: true,
            admin: this.$persistence.get("admin"),
            options: [],
            currNode: null
        };
    },
    methods: {
        reflushHandler() {
            this.getCategoryList();
        },
        getCategoryList() {
            this.$axiosPost(
                "/AdminService/findCategory",
                {
                    session: this.admin.session,
                    opts: { where: {} }
                },
                response => {
                    var categoryData = this.$findCategory(response.data.list, this.options);
                    this.$persistence.put("category", categoryData);
                    this.options = categoryData;
                    this.loading = false;
                },
                error => {
                    this.loading = false;
                }
            );
        },
        showDeletButton(node) {
            let isShow = true;
            if (node.data.children && node.data.children.length > 0) {
                isShow = false;
            }
            return isShow;
        },
        addZipHandler() {
            this.options = this.$persistence.get("category");
        },
        closeAddDlgZipDlg() {
            this.isShowAddDlgZipDlg = false;
        },
        onClickCategory(name) {
            let selid = this.currNode.data.value;
            let parentId = this.currNode.data.parentId;
            this.newzipname = name;
            this.$axiosPost(
                "/AdminService/updateCategory",
                {
                    session: this.admin.session,
                    category: {
                        name: this.newzipname,
                        parentId: parentId,
                        id: selid
                    }
                },
                response => {
                    this.$message({
                        message: "修改成功",
                        type: "warning"
                    });
                    this.currNode.data.label = response.data.name;
                    this.$persistence.put("category", this.options);
                    this.currNode = null;
                    this.isShowAddDlgZipDlg = false;
                }
            );
        },
        updateCategory(node, data) {
            this.currNode = node;
            this.oldzipname = data.label;
            this.isShowAddDlgZipDlg = true;
        },

        deleteCategory(node, data) {
            const id = data.value;
            const parent = node.parent;
            const children = parent.data.children || parent.data;
            const index = children.findIndex(d => d.value === data.value);

            this.$confirm("此操作将永久删除该目录, 是否继续?", "提示", {
                confirmButtonText: "确定",
                cancelButtonText: "取消",
                type: "warning"
            }).then(() => {
                this.$axiosPost(
                    "/AdminService/deleteCategory",
                    {
                        session: this.admin.session,
                        categoryId: id
                    },
                    response => {
                        if (response.data.ok) {
                            this.$message({
                                message: "删除成功",
                                type: "warning"
                            });
                            children.splice(index, 1);
                            this.$persistence.put("category", this.options);
                        }
                    }
                );
            });
        },
        closeHandler() {
            this.isShowAddDlg = false;
            this.$emit("closeHdl");
        }
    }
};
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
body {
    margin: 0;
}
span {
    font-weight: normal;
}
.buttonBar {
    margin-bottom: 10px;
    text-align: right;
}
.custom-tree-node {
    flex: 1;
    display: flex;
    align-items: center;
    justify-content: space-between;
    font-size: 14px;
    padding-right: 8px;
}
</style>